<template>
  <div class="arrange">
    <!-- 这里假设 mains 组件存在 -->
    <mains :title="'医生排班'"></mains>
    <div class="app-container">
      <!-- 顶部操作栏 -->
      <div class="top-bar">
        <button type="button" @click="prevWeek">上一周</button>
        <button type="button" @click="currentWeek" class="active">本周</button>
        <button type="button" @click="nextWeek">下一周</button>
        <select v-model="selectedDepartment" placeholder="请选择科室" style="width:150px">
          <option
            v-for="(department, index) in departmentList"
            :value="department.value"
            :key="index"
          >
            {{ department.label }}
          </option>
        </select>
        <input v-model="patientName" placeholder="请输入病人姓名" />
        <button type="button" @click="searchData" style="background-color: #0c82f7;color:#fff">搜索</button>
      </div>
      <!-- 表格 -->
      <table>
        <thead>
          <tr>
            <th rowspan="2" style="color: #0c82f7">医生姓名</th>
            <th rowspan="2">科室</th>
            <th colspan="2">2021/01/01 星期一</th>
            <th colspan="2">2021/01/02 星期二</th>
            <th colspan="2">2021/01/03 星期三</th>
            <th colspan="2">2021/01/04 星期四</th>
            <th colspan="2">2021/01/05 星期五</th>
            <th colspan="2">2021/01/06 星期六</th>
            <th colspan="2">2021/01/07 星期日</th>
            <th rowspan="2">操作</th>
          </tr>
          <tr>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
            <th>上午</th>
            <th>下午</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in getList" :key="index">
            <td style="color: #0c82f7">{{ item.doctorName }}</td>
            <td>{{ item.department }}</td>
            <td :class="{ bj: item.CACBABABam === '休', active: item.CACBABABam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABABam === '休' }">{{
                item.CACBABABam.slice(0, 2)
              }}</span
              >{{ item.CACBABABam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABABpm === '休', active: item.CACBABABpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABABpm === '休' }">{{
                item.CACBABABpm.slice(0, 2)
              }}</span
              >{{ item.CACBABABpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABACam === '休', active: item.CACBABACam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABACam === '休' }">{{
                item.CACBABACam.slice(0, 2)
              }}</span
              >{{ item.CACBABACam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABACpm === '休', active: item.CACBABACpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABACpm === '休' }">{{
                item.CACBABACpm.slice(0, 2)
              }}</span
              >{{ item.CACBABACpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABADam === '休', active: item.CACBABADam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABADam === '休' }">{{
                item.CACBABADam.slice(0, 2)
              }}</span
              >{{ item.CACBABADam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABADpm === '休', active: item.CACBABADpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABADpm === '休' }">{{
                item.CACBABADpm.slice(0, 2)
              }}</span
              >{{ item.CACBABADpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAEam === '休', active: item.CACBABAEam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAEam === '休' }">{{
                item.CACBABAEam.slice(0, 2)
              }}</span
              >{{ item.CACBABAEam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAEpm === '休', active: item.CACBABAEpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAEpm === '休' }">{{
                item.CACBABAEpm.slice(0, 2)
              }}</span
              >{{ item.CACBABAEpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAFam === '休', active: item.CACBABAFam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAFam === '休' }">{{
                item.CACBABAFam.slice(0, 2)
              }}</span
              >{{ item.CACBABAFam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAFpm === '休', active: item.CACBABAFpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAFpm === '休' }">{{
                item.CACBABAFpm.slice(0, 2)
              }}</span
              >{{ item.CACBABAFpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAGam === '休', active: item.CACBABAGam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAGam === '休' }">{{
                item.CACBABAGam.slice(0, 2)
              }}</span
              >{{ item.CACBABAGam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAGpm === '休', active: item.CACBABAGpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAGpm === '休' }">{{
                item.CACBABAGpm.slice(0, 2)
              }}</span
              >{{ item.CACBABAGpm.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAHam === '休', active: item.CACBABAHam !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAHam === '休' }">{{
                item.CACBABAHam.slice(0, 2)
              }}</span
              >{{ item.CACBABAHam.slice(2) }}
            </td>
            <td :class="{ bj: item.CACBABAHpm === '休', active: item.CACBABAHpm !== '休' }">
              <span class="red-first-two" :class="{ 'black-text': item.CACBABAHpm === '休' }">{{
                item.CACBABAHpm.slice(0, 2)
              }}</span
              >{{ item.CACBABAHpm.slice(2) }}
            </td>
            <td><Icon type="md-settings" color="#325ad2" @click="showModel"/></td>
          </tr>
        </tbody>
      </table>
      <!-- 分页 -->
      <pageNation
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
        ref="pagenation"
      >
      </pageNation>

      <!-- 模态框 -->
       <doctorInfo :showDialog="showDialog" ref ='isClose' @close = "Close"></doctorInfo>
       <closeModel :queRen="queRen" ref ='isClose' @close = "Closes"></closeModel>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import mains from '@/components/main.vue'
import { getDoctor } from '@/ncApi/registerApi'
import pageNation from '@/components/ncComponents/pageNation.vue'
import doctorInfo from "@/components/ncComponents/doctorInfo.vue"
import closeModel from "@/components/ncComponents/closeModel.vue"
const selectedDepartment = ref('')
const patientName = ref('')
const departmentList = reactive([
  { value: '1', label: '内科' },
  { value: '2', label: '外科' },
])
const currentPage = ref(1)
const pageSize = ref(10)
const getList = ref([])
const total = ref(0)
const getDoctorList = async () => {
  const res = await getDoctor({ pageNum: currentPage.value, pageSize: pageSize.value })
  console.log('安排面试数据', res)
  getList.value = res.data.list
  total.value = res.data.total
}
getDoctorList()
// 每页数量改变时的处理函数
const sizeChange = (newSize) => {
  console.log(11111)
  pageSize.value = newSize
  getDoctorList()
}

// 当前页码改变时的处理函数
const currentChange = (newPage) => {
  currentPage.value = newPage
  getDoctorList()
}
const pagenation = ref(null)

// 模态框
const showDialog = ref(false)
const queRen = ref(false)
const showModel = ()=>{
  showDialog.value = true
}
const isClose = ref(null)
const Close = ()=>{
  // 隐藏第一个模态框
  showDialog.value = false
  // 显示第二个模态框
  queRen.value = true
}
const Closes = ()=>{
  showDialog.value = false
  queRen.value = false
}
</script>

<style scoped>
/* 整体容器样式 */
.app-container {
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  width: 98%;
  /* max-width: 1200px;  */
  margin: 0 auto; /* 水平居中 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  overflow-x: auto; /* 处理表格溢出 */
}

/* 顶部操作栏样式 */
.top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap; /* 允许换行 */
}

.top-bar > * {
  margin-right: 10px;
  margin-bottom: 10px; /* 底部间距，适配换行 */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.top-bar button {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.top-bar button.active {
  background-color: #0c82f7;
  color: #fff;
}
.top-bar button:hover {
  background-color: #0c82f7;
  color:#fff;
}

/* 表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px; /* 最小宽度，避免内容挤压 */
}

table,
th,
td {
  border: 1px solid #ddd;
}

th,
td {
  padding: 12px 12px;
  text-align: center; /* 文本居中 */
  font-size: 12px; /* 修改字体大小 */
}

/* 修改表头背景颜色为白色 */
th {
  background-color: white;
  font-weight: 600;
  color: #333;
}

/* 表格行悬停效果 */
tbody tr:hover {
  background-color: #f9f9f9;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .app-container {
    width: 95%;
    padding: 15px;
  }

  .top-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .top-bar > * {
    width: 100%;
    margin-right: 0;
  }
}

/* 新增样式，将前两个字符设置为红色 */
.red-first-two {
  color: red;
}
.bj {
  background-color: #f8f6f6;
  color: rgb(35, 35, 35) !important;
}
/* 新增样式，将“休”字颜色设置为黑色 */
.black-text {
  color: rgb(35, 35, 35) !important;
}
</style>